<template>
  <div class="index">
    <div class="index_head">
      <div class="add_flex">
        <p class="head_logo"></p>
        <van-search class="head_search" v-model="value"   placeholder="搜好货" @click="gotoSearch"/>
        <strong @click="gotoSearch">杭州市</strong>
      </div>
      
    </div>
    <div class="index_main"> 
      <!-- banner图 -->
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="4000" indicator-color="white" >
          <van-swipe-item v-for="(item,index) in banner.list" :key="index">
            <img :src="item" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="index_nav">
        <van-grid :column-num="5" :border="false">
        <van-grid-item v-for="item in imgUrl" icon-size="70px" :key=item.title :icon=item.url :text=item.title @click="gotoClassic"/>
        </van-grid>
      </div>
      <!-- 首页列表信息 -->
      <div class="index_listinfo"> 
        <lastestProvide />
      </div>
    </div>
  </div>
</template>
<script>
import {useRouter} from "vue-router";
import {ref,reactive,onMounted,computed} from "vue";
import {getBannerList} from "../utils/api.js";
import a1 from "../assets/img/ac187ce67b4c41170b2f7ca153ee0473@2x.png";
import a2 from "../assets/img/377f7b298fc2fa6905cb30db0b9c7564@2x.png";
import a3 from "../assets/img/89dfe1313cba9307e0c860abfdfe000a@2x.png";
import a4 from "../assets/img/b7dbdf233bb684c49faeaaec66215c6d@2x.png";
import a5 from "../assets/img/684769b1f6a3ac0ffaab33d45bfe5fa6@2x.png";
import a6 from "../assets/img/958c5aac75840fcc3aaee88e0b37df47@2x.png";
import a7 from "../assets/img/89dfe1313cba9307e0c860abfdfe000a@2x.png";
import a8 from "../assets/img/7809f6d24c3ecfdbf7a889d6514fd253@2x.png";
import a9 from "../assets/img/331ed98a520cf193a20a0411b8387b26@2x.png";
import a10 from "../assets/img/ac187ce67b4c41170b2f7ca153ee0473@2x.png";
import lastestProvide from "../components/Index/LastestProvide.vue";
// import getLunboApi from "../utils/api.js";
export default {
  setup(){
      //轮播图下的导航
      const imgUrl=reactive([{url: a1,title:"水果"},{url:a2,title:"蔬菜"},{url:a3,title:"粮油"},{url:a4,title:"食用菌"},{url:a5,title:"中药材"},{url:a6,title:"畜禽"},{url:a7,title:"水产"},{url:a8,title:"干果"},{url:a9,title:"茶叶"},{url:a10,title:"更多"}]);
      //输入框绑定的变量
      const value=ref(""); 
      //banner图数据
      const banner=ref({});
      //引入router
      const router = useRouter();
      const gotoSearch=()=>{
        console.log(imgUrl);
        router.push("/search");
      }
      //获取轮播图数据
      const getBanner=async ()=>{
        const temp=await getBannerList();
        banner.value=temp.result ;
        let prefix="http://"+banner.value.prefix;//地址前缀
        let bannerUrl=[...banner.value.list];
        bannerUrl=bannerUrl.map((value,index)=>{
          console.log(prefix+value);
          return prefix+value;
        });
        banner.value.list=[...bannerUrl];
      }
      //导航去分类页
      const gotoClassic=()=>{
        router.push("/home/classic");
      }
      onMounted(()=>{
        getBanner();
      })
      return {gotoSearch,value,imgUrl,banner,gotoClassic};
  },
  components:{
    lastestProvide
  }
};
</script>
<style lang="scss" >
  .index{
    padding:0 10px;
  }
  .index_head{
    position:fixed;
    top:0;
    left:0;
    height:50px;
    width:100%;
    .add_flex{
      display: flex;
      width:100%;
      justify-content:space-between;
      align-items: center;
    }
    .head_logo{
        width:50px;
        height:40px;
        margin:5px 0;
        background: url("../assets/img/矢量智能对象@2x(3).png") no-repeat -32px 0px;
        background-size:80px 46px;
    }
    .head_search{
      margin:0;
      padding:0;
      width:200px !important;
      height:45px !important;
      border-radius:10px;
      overflow:hidden;
      font-size: 20px;
    }
    .van-icon-search{
      height:45px !important;
      font-size: 19px;
      line-height:45px;
    }
    .van-field__control{
      width:180px !important;
      height:45px !important;
    }
    strong{
      display:inline-flex;
      width:80px;
      text-indent: 16px;
      font-weight: 500;
      font-size: 18px;
      overflow:hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: url("../assets/img/位置 拷贝 3@2x.png") no-repeat 0px 0px;
      background-size:15px 20px;
      cursor: pointer;
    }
  
  }
  .index_main{
    position:fixed;
    top:50px;
    bottom:60px;
    width:95%;
    overflow-y: auto;
  }
  .index_nav{
    .van-grid{
      padding:5px 0;
    }
    .van-grid-item__icon{
      font-size: 38px;
    }
    .van-grid-item__text{
      font-size: 15px;
    }
    .van-grid-item__content {
      padding:8px;
    }
  }
  .banner{
    margin-top:16px;
    border-radius:20px;
    height:180px;
      img{
        width:100%;
        height:180px;
        border-radius: 12px;
        display:block;
        z-index:1000;
      }
     .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
  }
  }
</style>